<template>
  <div>
      <h1>{{$store.state.name}}</h1>
    <p>您输入的地址有误，清检查后重试！</p>
    <!-- 通过内置组件跳转/声明式导航 -->
    <router-link to="/" tag="button" exact-active-class="aaa1"
      >返回首页</router-link
    >
    <router-link to="/coma" tag="p" exact-active-class="aaa1"
      >coma页面</router-link
    >
    <router-link to="/big?age=18&time=2022" exact-active-class="aaa1">big页面</router-link>
    <router-link to="/404" exact-active-class="aaa1">404页面</router-link>
    <hr>
    <hr>
    <button @click="change('/')">返回首页</button>
    <button @click="change('/coma')">coma页面</button>
    <button @click="change('/big')">big页面</button>
    <button @click="change('/404')">404页面</button>
    <button @click="change('/layout/mid1')">layout页面</button>
    <button @click="change('/list')">list页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    // 页面传参的两种方式：1。qurry传参，它适用于所有页面。获取参数的方式$route.query
    // 页面传参的两种方式：2.动态路由 需要改的代码比较多，适用于列表页到详情页，获取数据的方式$route.params
    change(url) {
      // 编程式导航
      // if() 可以加上很多逻辑判断
      // 自学：解决$router.push（）跳转当前地址报错
      this.$router.push(url+'?ifhh=laigflhgs') // 常用的方法。每次跳转都会新增一个历史记录
      // this.$router.replace(url) // 不常用的方法。每次跳转都会用新的地址替换旧的地址，只有一条历史记录
      // this.$router.go(整数)  go(-1) 返回上一页
    }
  }
};
</script>

<style>
.aaa1 {
  color: red;
}
</style>